<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册页面</title>
</head>

<style>
   div{
     width: 450px;
     height: 270px;
     border: 1px black solid;
   }
   .flag{
     visibility: hidden; /* 隐藏文本内容 */
   }
   .OK{
     visibility: hidden; /* 隐藏文本内容 */
   }
   .error{
     visibility: visible; /*输入错误让其显示*/
     color: red;
   }
</style>

<body>
    <h3>用户注册页面</h3>
    <form action="#" onsubmit="return user()">
        <div>
       <p>用户名：
           <input type="text" id="username" placeholder="请输入用户名" onblur="user()">
           <span id="unspan" class="flag">用户格式不正确</span>
        </p>
       <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"></p>
       <p>性&nbsp;&nbsp;&nbsp;别：
           <input type="radio" name="sex" checked="checked">男
           <input type="radio" name="sex">女
        </p>
       <p>学&nbsp;&nbsp;&nbsp;历：
           <select>
               <option value="本科" selected="selected">本科</option>
               <option value="专科">专科</option>
           </select>
       </p>
       <p>自我介绍：
           <textarea cols="30" rows="5" id="submit" placeholder="请输入您的自我介绍内容"></textarea>
        </p>
         </div>
         <p><button style="color:red">提交</button></p>
    </form>
    <script>
        /*  1. 编写一个注册用户信息页面，需求如下：
          <1>表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍；
          <2>输入完用户名后校验只能是"admin"，否则弹框提示错误
          <3>点击提交执行后执行事件，把自我介绍的内容弹框提示出来； */
       function user(){
           var username = document.getElementById("username");
           var span = document.getElementById("unspan");
           //console.log(username.value);
           if(username.value == "admin"){

               span.className = "OK"; //正确
               add(); //调用函数,弹出自我介绍内容
               return true;

           }else{

               span.className = "error"; //错误
               alert("用户名错误！");
               return false;
               
           }
       }      

       function add(){
           var submit = document.getElementById("submit");
           console.log(submit.value);
           //因为前面user方法中调用了add方法，所以此处判断不为空时，才弹框
           if(submit.value != ""){ 
              alert(submit.value);
           }
       }
         
    </script>
</body>
</html>